<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<view class="justify-between">
					<view class="flex-row group_2">
						<view class="flex-row">
							<view class="section_2">
								<!--*-->
							</view>
							<text class="text_1">参考标准</text>
						</view>
						<view class="flex-row group_4">
							<view class="section_3">
								<!--*-->
							</view>
							<text class="text_2">实际发生</text>
						</view>
					</view>
					<view class="flex-col items-center text-wrapper33" v-if="isUpgrade==false"><text class="text_3"
							@click="show=true">升级版本</text>
					</view>
				</view>
				<view class="flex-col group_5" style=" text-align:c;z">
					<scroll-view style="white-space: nowrap;" :scroll-x="true">
						<qiun-data-charts :style="{width:scrollWidth+'px'}"
							:opts="{color:['#3D55FF','#F15923'],yAxis:{data:[{tofix:0,unit:'%',min:0,max:100}]}}"
							type="column" :chartData="chartsDataColumn1" />
					</scroll-view>
				</view>
			</view>
			<view class="flex-col section_15">
				<!-- 合同总计 -->
				<view class="justify-between group_16">
					<text class="text_35">合同总计</text>
					<view class="flex-row " @click="go('/pages/index/book/detailed?all=1')">
						<text class="text_36">明细</text>
						<u-icon name="arrow-right" color="#000000" size="30"></u-icon>
					</view>
				</view>
				<view class="flex-col group_17">
					<view class="divider_5">
						<!--合同总计距离底部-->
					</view>
					<view class="flex-row equal-division" v-if="hetong.settlementContract">
						<!-- 合同总额(万) -->
						<view class="flex-col items-center equal-division-item group_18">
							<view><text
									class="text_37">{{(hetong.hasOwnProperty('settlementContract') && hetong.settlementContract !='null')?hetong.settlementContract.split('.')[0]:'0'}}</text><text
									class="text_39">.{{(hetong.hasOwnProperty('settlementContract') && hetong.settlementContract !='null')?hetong.settlementContract.split('.')[1]:'00'}}</text>
							</view>
							<text class="text_41">合同总额(万)</text>
						</view>
						<!--已支付(万)  -->
						<view class="flex-col items-center equal-division-item">
							<view>
								<text
									class="text_37">{{(hetong.hasOwnProperty('paid') && hetong.paid  !='null')?hetong.paid.split('.')[0]:'0'}}</text>
								<text
									class="text_39">.{{(hetong.hasOwnProperty('paid') && hetong.paid  !='null')?hetong.paid.split('.')[1]:'00'}}</text>
							</view>
							<text class="text_41">已支付(万)</text>
						</view>
						<view class="flex-col items-center equal-division-item">
							<view>
								<text
									class="text_37">{{(hetong.hasOwnProperty('unPaid') && hetong.unPaid  !='null')?hetong.unPaid.split('.')[0]:'0'}}</text>
								<text
									class="text_39">.{{(hetong.hasOwnProperty('unPaid') && hetong.unPaid  !='null')?hetong.unPaid.split('.')[1]:'00'}}</text>
							</view>
							<text class="text_41">剩余支付(万)</text>
						</view>
						<view class="flex-col items-center equal-division-item">
							<view>
								<text
									class="text_37">{{(hetong.hasOwnProperty('originalContract') && hetong.originalContract  !='null')?hetong.originalContract.split('.')[0]:'0'}}</text>
								<text
									class="text_39">.{{(hetong.hasOwnProperty('originalContract') && hetong.originalContract  !='null')?hetong.originalContract.split('.')[1]:'00'}}</text>
							</view>
							<text class="text_41">原合同额(万)</text>
						</view>
						<view class="flex-col items-center equal-division-item">
							<view>
								<text
									class="text_37">{{(hetong.hasOwnProperty('changeAmount') && hetong.changeAmount  !='null')?hetong.changeAmount.split('.')[0]:'0'}}</text>
								<text
									class="text_39">.{{(hetong.hasOwnProperty('changeAmount') && hetong.changeAmount  !='null')?hetong.changeAmount.split('.')[1]:'00'}}</text>
							</view>
							<text class="text_41">变更额(万)</text>
						</view>
					</view>
					<u-empty v-else mode="data" width="200" marginTop="0%" textSize="30rpx"
						icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
				</view>
			</view>
			<!-- 列表 -->
			<view class="flex-col list" v-if="book.length>0">
				<view class="flex-col list-item" v-for="(item,index)  in book" :key="index">
					<view class="justify-between" @click="go('/pages/index/book/detailed?id='+item.accountbookTypeId)">
						<view class="flex-row">
							<view style="margin-top: -2rpx; ">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557867941336379202.png"
									class="image_1" />
							</view>

							<view class="group_30">
								<text class="text_55">{{item.accountbookTypeName}}</text>
								<text
									class="text_56">{{item.accountbookNumber>0?'('+item.accountbookNumber+')':''}}</text>
							</view>
						</view>
						<view class="flex-row">
							<text class="text_36">明细</text>
							<text class="text_366">
								<u-icon name="arrow-right" color="#000000" size="30"></u-icon>
							</text>

						</view>
					</view>
					<view class="flex-col group_9">
						<view class="flex-row u-flex-wrap">
							<view class="flex-row items-center justify-center u-m-t-30"
								v-for="(it,i) in item.accountbookList" :key="i"
								:class="[item.accountbookIdList.search(it.accountbookId)!=-1?'text-wrapper':'text-wrapper_1',(i+1)%4==0?'':'u-m-r-15']"
								@click="go('/pages/index/book/addbooks?name='+item.accountbookTypeName+'&id='+item.accountbookTypeId+'&lid='+it.accountbookId)">
								<text class="text_11">{{it.name}}</text>
							</view>
						</view>
					</view>
					<view class="flex-col items-center text-wrapper_5 u-flex-wrap"><text class="text_67"
							@click="go('/pages/index/book/addbooks?name='+item.accountbookTypeName+'&id='+item.accountbookTypeId+'&lid=0')">+自定义添加</text>
					</view>
				</view>
			</view>
			<u-empty v-else mode="data" width="250" marginTop="0%" textSize="30rpx"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<shop-modal confirmText="继续" title="升级版本" :show="show" @confirm="confirm" @close="show=false">
			<view class="u-p-30 w-full  u-m-t-30">
				<text class="tip">升级版本即开通全流程咨询或托管服务后装修账簿升级为账簿＋各类合约要点提示功能</text>
			</view>

		</shop-modal>
	</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				// list_zRW5vHFi: [null, null, null],
				family: {},
				hetong: {},
				isUpgrade: false,
				scrollWidth: 0,
				chartsDataColumn1: {},
				book: [],
				show: false,
			};
		},
		onShow() {
			this.$store.dispatch('checkHouse');
			this.init();
		},
		methods: {
			getFamily() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {

						if (!r.data.project.projectId) {
							uni.showToast({
								icon: 'none',
								title: '请首先新增房屋信息',
								duration: 2000,
								success: () => {
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/index/editHourse'
										})
									})

								}
							});
						} else {
							this.family = r.data.project;
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: '请首先新增房屋信息',
							duration: 2000,
							success: () => {

								uni.navigateTo({
									url: '/pages/index/editHourse'
								})
							}
						});
					}
				});
			},
			clickItem(i) {
				this.index = i;
			},
			init() {
				this.getFamily()
				this.sumExhibition();
				this.accountbook();
				this.sumExhibitionGraphics()
				this.getUpgrade();
			},
			getUpgrade() {
				this.$http('lbook.isUpgrade').then(r => {
					if (r.code == 200) {
						if (r.data == 1) {
							this.isUpgrade = true;
						} else {
							this.isUpgrade = false;
						}
					}
				});
			},
			confirm() {
				uni.navigateTo({
					url: "/pages/index/housekeeper"
				})
			},
			sumExhibition() {
				this.$http('lbook.sumExhibition').then(r => {
					if (r.code == 200) {
						if (r.data) {
							this.hetong = r.data
						}

					}
				});
			},
			accountbook() {
				this.$http('lbook.accountbook').then(r => {
					if (r.code == 200) {
						this.book = r.data;
						console.log(this.book);
					}
				});
			},
			sumExhibitionGraphics() {
				this.$http('lbook.sumExhibitionGraphics').then(r => {
					if (r.code == 200) {
						this.chartsDataColumn1 = r.data;
						this.scrollWidth = 80 * r.data.categories.length

					}
				});
			},
			clickItem1(s) {
				this.index1 = s;
			},
			clickItem2(j) {
				this.index2 = j;
			},
		},
	};
</script>

<style scoped lang="scss">
	.tip {
		height: 140rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 52rpx;
		letter-spacing: 4rpx;
	}

	.list-item {
		padding: 32rpx 22rpx 32rpx 35rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_31 {
		margin-top: 33rpx;
	}

	.text-wrapper_5 {
		margin-top: 32rpx;
		// padding: 13rpx 16rpx;
		align-self: flex-start;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		width: 175rpx;
		height: 64rpx;
	}

	.equal-division-item {
		margin-left: 5rpx;

		padding: 10rpx 0;
	}

	.group_29 {
		margin-top: 5rpx;
	}

	.text_57 {
		margin-right: 28rpx;
		margin-bottom: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text-wrapper {
		color: #1D6AFF;
		margin-right: 8rpx;
		// padding: 13rpx 20rpx;
		border-radius: 32rpx;
		border: 1px #1d6aff solid;
		background-color: #e8f0ff;
		height: 64rpx;
		width: 150rpx;
	}

	.text-wrapper33 {
		color: #1D6AFF;
		margin-right: 8rpx;
		// padding: 13rpx 20rpx;
		border-radius: 32rpx;
		border: 1px #1d6aff solid;
		background-color: #e8f0ff;
		height: 50rpx;
		width: 156rpx;

	}

	.text-wrapper_1 {
		margin-right: 8rpx;
		// padding: 13rpx 20rpx;
		border-radius: 32rpx;
		background: #F6F7F9;
		width: 149rpx;
		height: 64rpx;
	}

	.text-wrapper_2 {
		margin-left: 16rpx;
		padding: 13rpx 0 23rpx;
		flex: 1 1 152rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.text-wrapper_3 {
		margin-left: 16rpx;
		padding: 13rpx 0 23rpx;
		flex: 1 1 152rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.text-wrapper_4 {
		margin-left: 16rpx;
		padding: 13rpx 0 23rpx;
		flex: 1 1 152rpx;
		background-color: #f6f7f9;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.text_67 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image_1 {
		flex-shrink: 0;
		// align-self: center;
		width: 26rpx;
		height: 16rpx;
	}

	.group_30 {
		margin-left: 12rpx;
		// height: 5rpx;
	}

	.text_59 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_61 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_63 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_65 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.section_14 {
		background-color: #d9d9d9;
		width: 1rpx;
		height: 8rpx;
	}

	.text_37 {
		color: #1d6aff;
		font-size: 40rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 47rpx;
	}

	.text_39 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_41 {
		margin-top: 17rpx;
		padding: 0 10rpx;
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding: 20rpx 24rpx 52rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding: 32rpx 24rpx 41rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_15 {
		margin-top: 20rpx;
		background-image: linear-gradient(359.5deg, #ffffff 0%, #ffffff 63.69%, #dde9ff 99.99%, #dde9ff 100%);
		border-radius: 16rpx;
	}

	.list {
		padding: 20rpx 0;
	}

	.group_5 {
		margin-top: 50rpx;
	}

	.group_16 {
		padding: 29rpx 24rpx 29rpx;
		display: flex;
		width: 100%;
		// height: 100%;
		align-items: center;
	}

	.group_17 {
		padding-bottom: 33rpx;
	}

	.list-item:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.group_2 {
		margin-top: 5rpx;
	}

	.group_9 {
		margin-top: 3rpx;
	}

	.group_15 {
		margin-top: 10rpx;
		padding-left: 60rpx;
	}

	.text_35 {
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_36 {
		display: flex;
		height: 100%;
		align-items: center;
		margin-right: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_366 {
		display: flex;
		height: 100%;
		align-items: center;
		margin-top: 2rpx;
		// margin-right: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.divider_5 {
		margin: 0 24rpx;
		background-color: #3568f6;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.equal-division {
		margin-top: 18rpx;
		// padding: 0 9rpx;
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
	}

	.group_4 {
		margin-left: 64rpx;
	}

	.text_3 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text_4 {
		margin-right: 294rpx;
		align-self: flex-end;
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
	}

	.group_7 {
		margin-top: 4rpx;
	}

	.group_10 {
		margin-top: 42rpx;
		flex-shrink: 0;
	}

	.group_11 {
		margin: 0 3rpx 3rpx 15rpx;
		flex: 1 1 auto;
	}

	.text_30 {
		margin-bottom: 6rpx;
		color: #111111;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_31 {
		margin-left: 29rpx;
		margin-top: 6rpx;
		color: #111111;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_32 {
		margin-left: 26rpx;
		margin-bottom: 6rpx;
		color: #111111;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_33 {
		margin-left: 47rpx;
		margin-bottom: 6rpx;
		color: #111111;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_34 {
		margin-left: 48rpx;
		margin-bottom: 6rpx;
		color: #111111;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.group_18 {
		margin-left: 0;
	}

	.section_2 {
		margin-top: 12rpx;
		flex-shrink: 0;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 16rpx;
		height: 16rpx;
	}

	.text_1 {
		margin-left: 16rpx;
		color: #111111;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.section_3 {
		margin-top: 12rpx;
		flex-shrink: 0;
		background-color: #fe641a;
		border-radius: 4rpx;
		width: 16rpx;
		height: 16rpx;
	}

	.text_2 {
		margin-left: 16rpx;
		color: #111111;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_5 {
		color: #111111;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.group_8 {
		margin: 4rpx 4rpx 0 15rpx;
		padding: 7.5rpx 0 9.5rpx;
		flex: 1 1 auto;
		position: relative;
	}

	.text_7 {
		align-self: center;
		color: #111111;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_8 {
		margin-top: 45rpx;
		align-self: center;
		color: #111111;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_9 {
		margin-top: 45rpx;
		align-self: center;
		color: #111111;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_10 {
		margin-top: 45rpx;
		align-self: flex-end;
		color: #111111;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_11 {
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_12 {
		padding-left: 12rpx;
		padding-bottom: 142rpx;
		height: 326rpx;
		position: relative;
	}

	.group_14 {
		padding: 0 83rpx;
		border-left: solid 1rpx #d9d9d9;
		border-right: solid 1rpx #d9d9d9;
	}

	.divider {
		background-image: repeating-linear-gradient(90deg,
				#e2e2e2,
				#e2e2e2 2.04778156996587%,
				transparent 2.04778156996587%,
				transparent 3.071672354948805%);
		height: 1rpx;
	}

	.text_6 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 260rpx;
		bottom: 0;
	}

	.text_12 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 251rpx;
		top: 0;
	}

	.text_13 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 248rpx;
		top: 26rpx;
	}

	.text_14 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 53rpx;
		top: 68rpx;
	}

	.text_15 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 139rpx;
		top: 69rpx;
	}

	.text_16 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 51rpx;
		top: 94rpx;
	}

	.text_17 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 137rpx;
		top: 95rpx;
	}

	.text_18 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 118rpx;
		top: 99rpx;
	}

	.text_19 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 45rpx;
		top: 97rpx;
	}

	.text_20 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 14rpx;
		top: 136rpx;
	}

	.text_21 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 177rpx;
		top: 136rpx;
	}

	.text_22 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 171rpx;
		top: 138rpx;
	}

	.text_23 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 123rpx;
		top: 125rpx;
	}

	.text_24 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 43rpx;
		top: 123rpx;
	}

	.text_25 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 3rpx;
		top: 140rpx;
	}

	.text_26 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 12rpx;
		bottom: 146rpx;
	}

	.text_27 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		left: 175rpx;
		bottom: 146rpx;
	}

	.text_28 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 168rpx;
		bottom: 144rpx;
	}

	.text_29 {
		color: #333333;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
		position: absolute;
		right: 0;
		bottom: 142rpx;
	}

	.group_13 {
		height: 321rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		border-bottom: solid 1rpx #d9d9d9;
	}

	.text_55 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_56 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.divider_1 {
		background-image: repeating-linear-gradient(90deg,
				#e2e2e2,
				#e2e2e2 2.04778156996587%,
				transparent 2.04778156996587%,
				transparent 3.071672354948805%);
		height: 1rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 251.5rpx;
	}

	.divider_2 {
		background-image: repeating-linear-gradient(90deg,
				#e2e2e2,
				#e2e2e2 2.04778156996587%,
				transparent 2.04778156996587%,
				transparent 3.071672354948805%);
		height: 1rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 115.5rpx;
	}

	.divider_3 {
		background-image: repeating-linear-gradient(90deg,
				#e2e2e2,
				#e2e2e2 2.04778156996587%,
				transparent 2.04778156996587%,
				transparent 3.071672354948805%);
		height: 1rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 183.5rpx;
	}

	.divider_4 {
		background-image: repeating-linear-gradient(90deg,
				#e2e2e2,
				#e2e2e2 2.04778156996587%,
				transparent 2.04778156996587%,
				transparent 3.071672354948805%);
		height: 1rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 47.5rpx;
	}

	.section_4 {
		background-color: #1d6aff;
		width: 30rpx;
		height: 136rpx;
		position: absolute;
		left: 19rpx;
		top: 184rpx;
	}

	.section_5 {
		background-color: #fe641a;
		width: 30rpx;
		height: 204rpx;
		position: absolute;
		left: 49rpx;
		top: 116rpx;
	}

	.section_6 {
		background-color: #1d6aff;
		width: 30rpx;
		height: 195rpx;
		position: absolute;
		left: 143rpx;
		top: 125rpx;
	}

	.section_7 {
		background-color: #fe641a;
		width: 30rpx;
		height: 136rpx;
		position: absolute;
		left: 173rpx;
		top: 184rpx;
	}

	.section_8 {
		background-color: #1d6aff;
		width: 30rpx;
		height: 320rpx;
		position: absolute;
		left: 267rpx;
		top: 0;
	}

	.section_9 {
		background-color: #fe641a;
		width: 30rpx;
		height: 272rpx;
		position: absolute;
		right: 259rpx;
		top: 48rpx;
	}

	.section_10 {
		background-color: #1d6aff;
		width: 30rpx;
		height: 136rpx;
		position: absolute;
		right: 166rpx;
		top: 184rpx;
	}

	.section_11 {
		background-color: #fe641a;
		width: 30rpx;
		height: 170rpx;
		position: absolute;
		right: 136rpx;
		top: 150rpx;
	}

	.section_12 {
		background-color: #1d6aff;
		width: 30rpx;
		height: 162rpx;
		position: absolute;
		right: 42rpx;
		top: 158rpx;
	}

	.section_13 {
		background-color: #fe641a;
		width: 30rpx;
		height: 137rpx;
		position: absolute;
		right: 12rpx;
		top: 183rpx;
	}
</style>
